The visibility property in CSS is used to control whether an element is visible or hidden, without affecting the layout of the document. Unlike the display: none property, which removes the element from the document flow, visibility: hidden keeps the element in the flow, but makes it invisible. Here are the common values for the visibility property:

Basic Usage

You can set the visibility property with the following values:

1. visibility: visible

The element is visible (default value):

.element {
    visibility: visible;
}

2. visibility: hidden

The element is hidden, but it still takes up space in the layout:

.element {
    visibility: hidden;
}

3. visibility: collapse

This value is primarily used with table rows and columns. It hides the element and also collapses the space it occupies (similar to display: none for table elements):

.table-row {
    visibility: collapse;
}

Example

Here is an example that demonstrates the use of the visibility property:

/* Element is visible */
.visible {
    visibility: visible;
}

/* Element is hidden but still takes up space */
.hidden {
    visibility: hidden;
}

/* Table row is collapsed */
.table-row-collapse {
    visibility: collapse;
}

Practical Use Case

Imagine you have a notification box that you want to hide without affecting the layout:

.notification {
    visibility: hidden; /* The box is hidden, but the space it occupies remains */
}

Using the visibility property, you can control the visibility of elements in a way that suits your design requirements. Let me know if you need more details or examples!